"use client"
import React, {useEffect, useState} from "react";
import {
    Button,
    Col,
    Input,
    message,
    Modal,
    Row, Select,
    Tree,
} from 'antd';
import {getExpandedKeys, setTreeSelect} from "@/utils/Z";
import {dataScope, getRole} from "@/clientApi/system/role";
import {deptTreeSelect, roleDeptTreeSelect} from "@/clientApi/system/dept";
import styles from "./index.module.css";
import { globalMessage } from "@/utils/message";

// 定义组件的 props 类型
interface MyComponentProps {
    open: boolean;
    title?: string;
    OnCanCle: () => void;
    roleId?: string;

}
interface formDataType{
    dataScope?:string,
    roleKey?:string|number,
    roleName?:string|number,
    stastus?:string|number,
    postSort?:string|number,

}
const DataPermissionsView: React.FC<MyComponentProps> = (props) => {
    // 表单的值
    const [formData, setFormData] = useState<formDataType>({})
    const [menuOptions, setMenuOptions] = useState([]);
    const [checkedKeys, setCheckedKeys] = useState([])
    const [expandedKeys, setExpandedKeys] = useState([]);
    const options = [
        {value: "1", label: "全部数据权限"},
        {value: "2", label: "自定数据权限"},
        {value: "3", label: "本部门数据权限"},
        {value: "4", label: "本部门及以下数据权限"},
        {value: "5", label: "仅本人数据权限"}
    ]

    function handleCancel() {
        props.OnCanCle()
    }

    useEffect(() => {
        console.log(props)
        if (props.roleId) {
            getRoleForm(props.roleId)
            getTreeSelect(props.roleId);
        }


    }, [props?.roleId]);
    const getRoleForm = (id: string): void => {
        getRole(id).then((res:any) => {
            if (res?.code === 200) {
                setFormData({...res.data, deptIds: res.data?.deptIds || []})
            }
        });
    };
    const getTreeSelect = (roleId: string): void => {
        roleDeptTreeSelect(roleId).then((res:any) => {
            if (res?.code === 200) {
                const obj = {
                    key: "id",
                    value: "id",
                    title: "label",
                };
                setMenuOptions(setTreeSelect(res?.depts, obj));
                setCheckedKeys(res?.checkedKeys)
                setExpandedKeys(getExpandedKeys(setTreeSelect(res?.depts, obj)));
            }
        });
    };

    const handleSubmit = () => {
        // 在提交前先进行表单验证
        dataScope(formData).then((res:any) => {

             globalMessage().warning(res.msg).then(r => {
            })
            props.OnCanCle()
        });
    }
    const onCheck = (selectedKeysValue: any): void => {
        setCheckedKeys(selectedKeysValue);
        setFormData(oldValue => ({
            ...oldValue,
            deptIds: selectedKeysValue
        }))

    };

    function onExpand(newExpandedKeys: any): void {
        setExpandedKeys(newExpandedKeys);
    }

    const onChangeSelect = (value: string): void => {
        if (value !== "2") {
            setFormData(oldValue => ({
                ...oldValue,
                dataScope: value,
                deptIds: []
            }))
        } else {
            setFormData(oldValue => ({
                ...oldValue,
                dataScope: value,
            }))
        }


    }


    return (
        <>
            <Modal
                forceRender
                open={props.open}
                title={props.title}
                footer={   <Row gutter={10} >
                    <Col offset={16} span={8}>
                        <div className={styles.buttonClass}>
                            <Button type="primary"  onClick={handleSubmit}>确认</Button>
                            <Button type="primary" onClick={handleCancel}>取消</Button>
                        </div>
                    </Col>
                </Row>}
                onCancel={() => {
                    props.OnCanCle()
                }}
            >
                <Row gutter={10}>
                    <Col span={4}>角色名称：</Col>
                    <Col span={20}> <Input value={formData.roleName} disabled={true}/></Col>
                </Row>
                <Row gutter={10}>
                    <Col span={4}>权限字符：</Col>
                    <Col span={20}> <Input value={formData.roleKey} disabled={true}/></Col>
                </Row>
                <Row gutter={10}>
                    <Col span={4}>权限范围：</Col>
                    <Col span={20}> <Select onChange={onChangeSelect} defaultValue={formData.dataScope}
                                            value={formData.dataScope} style={{width: "100%",}}
                                            options={options}/></Col>
                </Row>
                <Row gutter={10}>
                    {formData?.dataScope === "2" && (<><Col span={4}>数据权限：</Col>
                        <Col span={20}>
                            <Tree
                                checkable
                                onCheck={onCheck}
                                defaultCheckedKeys={checkedKeys}
                                checkedKeys={checkedKeys}
                                defaultSelectedKeys={checkedKeys}
                                treeData={menuOptions}
                                expandedKeys={expandedKeys}
                                onExpand={onExpand}
                            /></Col></>)}
                </Row>

            </Modal>

        </>
    )
};
export default DataPermissionsView;
